import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { BasicShoppingCard, AdvancedShoppingCard } from '../shared';
import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx';

<Alert role="none" variation="info">
  The minimum version supported by Amplify UI is Create React App v5 ([Migration Guide](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500)).
  If you have any issue with Create React App v4, check out [Trouble Shooting](/react/getting-started/troubleshooting#create-react-app).
</Alert>

## Tutorial

In this brief tutorial, we're going to build a basic shopping card component using Create React App ([CRA](https://create-react-app.dev)) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI.

### Setup and Installation

First, execute the command below in your terminal:

<TerminalCommand command="npx create-react-app amplify-ui-demo && cd amplify-ui-demo" />

This creates a basic React app from scratch named `amplify-ui-demo`. For more information, see the [Create-React-App documentation](https://create-react-app.dev).

Then, install the Amplify UI React package:

<InstallScripts framework="react" />

### Basic Demo

Open up the project in your IDE and replace the contents of the `App.js` file with the code below:

<Example>
  <ExampleCode>
  
```tsx file=./examples/BasicExampleCode.tsx

```

  </ExampleCode>
  <BasicShoppingCard />
</Example>

When you start the app (`npm/yarn start`), you should see a basic shopping card component. 

### Advanced Demo

If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `src` folder named `paintings.js`, and copy/paste this code into it:

  <ExampleCode>

```tsx file=./examples/paintings.ts

```

  </ExampleCode>

Then, replace the contents of `App.js` with the code below, restart the app, and experience all the beautiful components in action!

<Example>
  <ExampleCode>

```tsx file=./examples/AdvancedExampleCode.tsx

```

  </ExampleCode>
  <AdvancedShoppingCard />
</Example>